//内部demo 一层一层
class Demo3 extends Component {
  static contextType = Mycontext;
  render(){
    console.log(this)
    return (
      <div>
        <h2>这是三级Demo</h2>
        <button onClick={ ()=>this.context.setTheme('blue') }>更新主题</button>
        <div style={{background:this.context.theme }}>FFF</div>
      </div>
    )
  }
}
const Demo2 = ()=>{
  return <div>
    <h2>FU</h2>
    <Mycontext.Consumer>
      {
        value =>{
          console.log(value)
          return  (
            <div style={{backgroundColor:value.theme}}>
              组件
            </div>
          )
        }
      }
    </Mycontext.Consumer>
    <Demo3 />
  </div>
}
const Demo1 = ()=>{
  return <div>
    <Demo2 />
  </div>
}


class App extends Component{
  state = {userName:'Fu', theme:'#ccc'}
  setTheme = (theme)=>{
    this.setState({theme})
  }
  render(){
    return (
      <Mycontext.Provider value={{...this.state, setTheme:this.setTheme}} >
        <div>
          <Todolist />
          <Demo1 />
        </div>
      </Mycontext.Provider>
    );
  }
}